<template>
  <div>
    <!-- 中止弹出框 -->
    <CommonDialog
      title="终止"
      width="75%"
      v-bind:dialogVisible="suspendDialogVisible"
      @on-change-dialogVisible="suspendChange"
      class="suspend"
      top="10vh"
    >
      <template #body>
        <el-form
          class="suspendForm"
          ref="suspendForm"
          :rules="suspendFormRules"
          :model="suspendForm"
          label-width="100px"
          label-position="top"
        >
          <el-form-item label="终止原因" class="suspendReason" prop="suspendReason">
            <!-- <quill-editor
              v-model="suspendForm.suspendReason"
              ref="suspendReasonEditor"
            >
            </quill-editor> -->
            <socialUpload :contentDefault="suspendForm.suspendReason" @getContent="getUpdateContent"></socialUpload>
            <!-- <vue-tinymce v-model="suspendForm.suspendReason" :setting="setting" /> -->
          </el-form-item>
        </el-form>
      </template>
      <template #dialog_footer>
        <el-button class="submitCancel" @click="suspendCancel">取 消</el-button>
        <el-button type="primary" @click="confirmSuspend('suspendForm')" class="submitReme">确认</el-button>
      </template>
    </CommonDialog>
  </div>
</template>

<script>
import socialUpload from '../socialUpload/socialUpload.vue'
import CommonDialog from '@/components/commonDialog/commonDialog.vue'
import { FeedBack } from '@/api/feedBack/server'
export default {
    name: '',
    components: {
        CommonDialog,
        socialUpload
    },
    props: {},
    data() {
        return {
            // 控制中止弹出框的显示和隐藏
            suspendDialogVisible: false,
            suspendForm: {
                suspendReason: ''
            },
            tableItemsId: '',
            suspendFormRules: {
                suspendReason: [{ required: true, message: '请输入终止原因', trigger: 'blur' }]
            }
        }
    },
    computed: {
    },
    watch: {},
    created() {},
    mounted() {},
    methods: {
        show(id) {
            this.tableItemsId = id
            this.suspendDialogVisible = true
        },
        suspendChange(val) {
            this.suspendDialogVisible = val
            this.$refs['suspendForm'].resetFields()
        },
        // 中止
        // 确认中止
        confirmSuspend(formName) {
            const objParmars = {
                content: this.suspendForm.suspendReason,
                id: this.tableItemsId,
                operationType: 5
            }
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.suspendOptionAsync(objParmars)
                    this.$refs[formName].resetFields()
                } else {
                    this.$message.error('请检查表单信息是否填写完整')
                    return false
                }
            })
        },
        async suspendOptionAsync(parmars) {
            try {
                const result = await FeedBack.OperationAsync(parmars)
                if (result.success) {
                    this.$message.success(result.message)
                    this.suspendDialogVisible = false
                    this.suspendForm = {
                        suspendReason: ''
                    }
                    this.$emit('refreshPage')
                } else {
                    this.$message.error(result.message)
                }
            } catch (error) {
                console.log(error)
            }
        },
        suspendCancel() {
            this.$refs['suspendForm'].resetFields()
            this.suspendDialogVisible = false
        },
        getUpdateContent(Value) {
            this.suspendForm.suspendReason = Value
        }
    }
}
</script>
